<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>main</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_620866_2oo4ijsffdklz0k9.css">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style type="text/css">
    html,body{
        height: 100%;
    }
    #app{
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
               flex-flow: column;
    }
   
    #foot .footer-active{
		color: #3399ff;
	}
	/*foot底部样式*/
	#foot{
		height: 50px; 
		/*line-height: 30px;*/
		border-top: 1px solid #ccc;
        background-color: #fff; 
        width: 100%;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
	}
	.foot-item{
		-webkit-box-flex: 1; 
        -webkit-flex: 1;
        flex: 1;
		height: 50px;
		font-size: 0;
		color: #888;
		text-align: center;
	}
	.foot-item>.iconfont{
		margin-bottom: 2px;
		display: block;
		height: 30px;
		font-size: 22px;
		line-height: 30px;
	}
	.foot-item>.icon-sousuo{
		font-size: 26px;
	}
	.foot-item>.note{
		font-size: 12px;
	}
	/*main中间样式*/
	#main{
		-webkit-box-flex: 1; 
        -webkit-flex: 1;
        flex: 1;
		background-color: orange;
	}
	/*head头部样式*/
	#head{
		height: 44px;
		background-color: #3399ff;
		display: -webkit-box;
        display: -webkit-flex;
        display: flex;
		align-items:center;
	}
	.icon-bhjscanqr{
		font-size: 30px;
		padding-left: 10px;
		color: #fff;
	}
	.input{
		-webkit-box-flex: 1; 
        -webkit-flex: 1;
        flex: 1;
		height: 30px;
		background-color: #fff;
		margin-right: 35px;
		margin-left: 20px;
		border-radius: 5px;
		line-height: 30px;
		color: #bbb;
		text-indent: 1em;
		position: relative;
	}
	.icon-fangdajing{
		position: absolute;
		right: 10px;
		top: 0;
		display: block;
		height: 30px;
		font-size: 20px;
	}
	/*----------------*/
    </style>
</head>
<body>
    <div id="app">
	    <div id="head">
	    	<span class="iconfont icon-bhjscanqr"></span>
	    	<div class="input">
	    		搜索模型/设计师等
	    		<span class="iconfont icon-fangdajing"></span>
	    	</div>
	    </div>
	    <div id="main"></div>
	    <div id="foot">
	    	<div class="foot-item footer-active">
	    		<span class="iconfont icon-sousuo"></span><br/>
	    		<span class="note">搜搜</span>
	    	</div>
	    	<div class="foot-item">
	    		<span class="iconfont icon-location"></span><br/>
	    		<span class="note">身边</span>
	    	</div>
	    	<div class="foot-item">
	    		<span class="iconfont icon-xiaoxi"></span><br/>
	    		<span class="note">消息</span>
	    	</div>
	    	<div class="foot-item">
	    		<span class="iconfont icon-icon--"></span><br/>
	    		<span class="note">&nbsp;购物车</span>
	    	</div>
	    	<div class="foot-item ">
	    		<span class="iconfont icon-iconfuzhi"></span><br/>
	    		<span class="note">我的</span>
	    	</div>
	    </div>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
        api.removeLaunchView()

        var headEL = $api.dom('#head');
        //适配iOS 7+，Android 4.4+状态栏
        $api.fixStatusBar(headEL);


        var headELPos = $api.offset(headEL);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);

        var frameGroupOpened = false
		var footEl = $api.dom('#foot')
		var footItemEl_arr = $api.domAll(footEl,'.foot-item')
		var footEl_length = footItemEl_arr.length
		var tabIndex = 0
		openFrameGroup()
		//给每个foot-item元素绑定点击事件
		giveFootItemAddEvent()
		function giveFootItemAddEvent() {
			for (var i = 0; i < footEl_length; i++) {
				(function (j) {
					footItemEl_arr[j].addEventListener("click",function (e) {
						changeTabBarIndex(j)
					})
				})(i)
			}
		}
		function openFrameGroup() {
			var frame_arr = [];
			var frame_arr_length = footEl_length
			if (frameGroupOpened) {
		        return;
		    }
		    for (var i = 0; i < frame_arr_length; i++) {
		    	frame_arr.push({
		            name: 'main_frame_' + i,
		            url: './main_frame'+i+'.html',
		            pageParam: {
		                wareTypeIndex: i
		            }
		        })
		    }
		    api.openFrameGroup({
		        name: 'mainFrameGroup',
		        scrollEnabled: true, // 支持手势滑动切换
		        rect: {
		            x: 0,
		            y: headELPos.h,
		            w: 'auto', // 自动填充所在Window的宽度
		            h: mainPos.h // 自动填充所在Window的高度
		        },
		        index: 0, // 默认显示第一个Frame
		        frames: frame_arr,
		        preload: frame_arr.length // 预加载所有Frame
		    }, function(ret, err) {
		        // Frame切换完成的响应函数，更新分类菜单的选中状态
		        changeTabBarIndex(ret.index);
		    });
		    framesOpened = true;
		}
		function changeTabBarIndex(newIndex) {
			if (tabIndex == newIndex) {
				return
			}
			var itemList = $api.domAll(footEl,'.foot-item')
			$api.removeCls(itemList[tabIndex],'footer-active')
			$api.addCls(itemList[newIndex],'footer-active')
			tabIndex = newIndex
			api.setFrameGroupIndex({
		        name: 'mainFrameGroup',
		        index: newIndex,
		        scroll: true
		    });
		}
		api.addEventListener({
	        name: 'keyback'
	    }, function(ret, err) {
	        api.confirm({
	            title: '提示',
	            msg: '是否退出应用',
	            buttons: ['确定', '取消']
	        }, function(ret, err) {
	            if (ret.buttonIndex == 1) {
	                // 关闭当前的主Widget，就可以实现推出APP的效果
	                api.closeWidget({
	                    silent: true //直接退出，无需提示
	                });
	            }
	        });
	    });

    };
</script>
</html>